<template>
  <div>
    <div class="container">
      <div class="playerMusic">
        <div class="left">
          <el-image
            class="img"
            :src="musicDetail.picUrl"
            fit="cover"
          ></el-image>

          <div class="iconList">
            <span class="iconfont icon-aixin"></span>
            <span class="iconfont icon-tianjia"></span>
            <span class="iconfont icon-xiazai"></span>
            <span class="iconfont icon-fenxiang"></span>
          </div>
        </div>
        <div class="right">
          <div class="musicInfo">
            <div class="name">{{ musicDetail.name }}</div>
            <div class="info">
              <div class="item">
                专辑:<span>{{ musicDetail.album }}</span>
              </div>
              <div class="item">
                歌手:<span>{{ musicDetail.singer }}</span>
              </div>
            </div>
            <!-- 歌词 -->
            <div class="lyric">
              <div class="line"></div>
              <div
                class="content"
                :style="`transform: translateY(${offset}px);`"
              >
                <div
                  style="white-space: pre-line"
                  :class="{ active: currentIndex === index }"
                  v-for="(content, index) in lyric.contents"
                  :key="index"
                >
                  {{ content }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="about">
        <div class="comment">
          <div class="title">听友评论</div>
          <el-input
            prefix-icon="el-icon-edit"
            placeholder="发表评论"
          ></el-input>
          <div class="content">
            <div class="title">精彩评论</div>
            <CommentItem
              :item="item"
              v-for="(item, index) in hotComments"
              :key="index"
            />
          </div>
          <div class="content">
            <div class="title">最新评论</div>
            <CommentItem
              :item="item"
              v-for="(item, index) in comments"
              :key="index"
            />
          </div>
        </div>
        <!-- <div class="recommendMusic"></div> -->
      </div>
    </div>
  </div>
</template>

<script>
import CommentItem from "../../components/CommentItem";
import { mapActions, mapState, mapMutations, mapGetters } from "vuex";

// 节流
import _ from "lodash";
export default {
  name: "Player",
  data() {
    return {};
  },
  components: {
    CommentItem,
  },
  computed: {
    offset() {
      const { currentIndex } = this;
      /* 偏移量32 */
      return currentIndex * -32 + 123;
    },
    ...mapGetters("player", ["musicId"]),
    ...mapState("player", [
      "musicDetail",
      "currentIndex",
      "comments",
      "hotComments",
      "commentTotal",
      "lyric",
    ]),
  },
  methods: {
    ...mapActions("player", [
      "getMusicDetail",
      "getMusicUrl",
      "getMusicComment",
      "getMusicLyric",
    ]),
    ...mapMutations("player", ["UPDTATEINDEX"]),

    // 更新歌词
    update() {
      const { times } = this.lyric;
      // 拿到的是秒 需要转为毫秒
      let currentTime = this.$audio.currentTime * 1000;
      this.progressBarWidth = (currentTime / this.musicDetail.duration) * 100;
      currentTime = this.$moment(currentTime).format("mm:ss");
      // 稍微优化性能
      // 从上一次的下标下一个 往下找一个 最多也就找两次
      // indexof每次都会添加一次 性能不好
      for (var i = this.currentIndex + 1; i < this.currentIndex + 3; i++) {
        // 用vuex管理当前下标 这样切换页面歌词不会乱
        console.log("更新歌词", times[i]);

        if (times[i] === currentTime) return this.UPDTATEINDEX(i);
      }
    },
    // 获取下标
    getCurrentIndex() {
      const { times } = this.lyric;
      let currentTime = this.$audio.currentTime * 1000;
      currentTime = this.$moment(currentTime).format("mm:ss");
      console.log("getCurrentIndex", currentTime);
      const currentIndex = times.indexOf(currentTime);
      if (currentIndex !== -1) this.UPDTATEINDEX(currentIndex);
    },
    eventListener() {
      this.throttle = _.throttle(this.update, 1000);
      this.$audio.addEventListener(
        "timeupdate",
        // 节流 原一秒4次 现在一秒一次
        this.throttle
      );
    },
  },
  async mounted() {
    if (this.$route.params.musicId === this.musicId) {
      // 每次进来都要获取一下最新的位置
      // 因为退出去导致事件被清除了
      this.getCurrentIndex();
      this.eventListener();
      return;
    }
    this.getMusicDetail();
    this.getMusicUrl();
    this.getMusicComment();
    // 必须等待歌词拿才能监听
    await this.getMusicLyric();
    // 每次进来都要获取一下最新的位置
    // 因为退出去导致事件被清除了
    this.getCurrentIndex();
    this.eventListener();
  },

  // watch: {
  //   async musicId(newId, oldId) {
  //     if (newId === oldId) return;
  //     this.$audio.removeEventListener("timeupdate", this.throttle);
  //     this.getMusicDetail();
  //     this.getMusicUrl();
  //     this.getMusicComment();
  //     // 必须等待歌词拿才能监听
  //     await this.getMusicLyric();
  //     // 每次进来都要获取一下最新的位置
  //     // 因为退出去导致事件被清除了
  //     this.getCurrentIndex();
  //     this.eventListener();
  //   },
  // },

  beforeDestroy() {
    this.UPDTATEINDEX(this.currentIndex);
    // 解绑timeupdate
    this.$audio.removeEventListener("timeupdate", this.throttle);
  },
};
</script>

<style scoped>
.container {
  width: 1000px;
  margin: 0 auto;
  margin-top: 50px;
  padding-bottom: 100px;
}

/* 音乐展示开始 */
.container > .playerMusic {
  display: flex;
  height: 500px;
}
.container > .playerMusic > .left {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* background-color: rgb(182, 243, 240); */
  width: 50%;
}
.container > .playerMusic > .left > .img {
  width: 350px;
  height: 350px;
  margin: 40px auto;
}
.container > .playerMusic > .left > .iconList {
  display: flex;
  width: 300px;
  justify-content: space-around;
}
.container > .playerMusic > .left > .iconList > span {
  font-size: 20px;
  color: #333;
  width: 40px;
  height: 40px;
  /* text-align: center; */
  line-height: 40px;
  border-radius: 50%;
  /* background-color: rgb(236, 236, 236); */
}
.container > .playerMusic > .right {
  /* background-color: rgb(182, 243, 228); */
  width: 50%;
}
.container > .playerMusic > .right > .musicInfo > .name {
  font-size: 26px;
  margin: 20px 0;
}
.container > .playerMusic > .right > .musicInfo > .lyric {
  margin-top: 20px;
  height: 300px;
  /* background-color: rgba(167, 248, 244, 0.5); */
  overflow: hidden;
  position: relative;
}
.container > .playerMusic > .right > .musicInfo > .lyric > .line {
  position: absolute;
  top: 50%;
  width: 100%;
  height: 1px;
  /* background-color: rgba(250, 240, 247, 0.897); */
}
.container > .playerMusic > .right > .musicInfo > .lyric > .content {
  transition: transform 0.8s;
  /* 偏移量32 */
}
.container > .playerMusic > .right > .musicInfo > .lyric > .content > div {
  /* text-align: center; */
  margin-top: 18px;
  font-size: 14px;
  transition: 0.8s;
  color: #666;
}
.container > .playerMusic > .right > .musicInfo > .lyric > .content > .active {
  font-size: 16px;
  color: coral;
}

.container > .playerMusic > .right > .musicInfo > .info {
  display: flex;
  justify-content: space-between;
}
.container > .playerMusic > .right > .musicInfo > .info {
  font-size: 14px;
  color: #333;
}
.container > .playerMusic > .right > .musicInfo > .info span {
  color: rgb(74, 197, 245);
}

/* 音乐展示结束 */

/* 有关于这首歌的开始 */
.content {
  margin-top: 20px;
}
.content > .title {
  font-size: 14px;
  font-weight: bold;
}

.container > .about {
  display: flex;
}
.container > .about > .comment {
  width: 100%;
  /* background-color: rgb(206, 243, 182); */
}
.container > .about > .comment > .title {
  font-weight: bold;
  margin-bottom: 10px;
}

.container > .about > .recommendMusic {
  width: 300px;
  /* background-color: rgb(203, 182, 243); */
}
</style>
